
<!--A Design by W3layouts
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
    <head>
        <title>Ero-Uikit a bootstrap Website Template | Home :: w3layouts</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/style_1.css" rel="stylesheet" type="text/css" media="all" />
        <!-- start plugins -->
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <link href="css/jquery.nouislider.css" rel="stylesheet">
        <script src="js/jquery.nouislider.js"></script>
    </head>
    <body>
        <div class="wrap">
        <div class="main_bg">            
            <div class="container">
                <center><h1>Who is your best friend ?</h1></center>
                <div class="quick"><!-- start quick -->
                    <div class="wrap">
                        <center><h3 class="style">Select Age <span id="slider_value1">20 to 30</span></h3></center>
                    <div id="slider" onchange="change()"></div>
                    <script>
                        $("#slider").noUiSlider({
                            start: [20, 30],
                            connect: true,
                            step:1,
                            range: {
                                'min': 10,
                                'max': 60
                            },                            
                            slide: function(event, ui) {
                                $("#amount").val(ui.value);
                            },
                            change: function(event, ui) {
                                $("#amount").val(ui.value);
                            }
                        });
                        function change(){
                            setInterval($('#d').trigger('click'),30);
                        }
//                        $("#slider_value1").html($("#slider").val());

                    </script>	
                    <h4 class="left style">10 years</h4>	
                    <h4 class="right style">60 years</h4>	
                    <div class="clearfix"></div>
                   </div> 
                </div><!-- end quick -->
            </div><!-- end switch_main ---->
            <div class="clearfix"></div>
            <div class="wrap">
                <center>
            <div class="form-elements">
                <!--<li>-->
                <div class="radio"> <label><input type="radio" name="radio" checked=""><i></i>Male</label> </div>                
                <div class="radio"> <label><input type="radio" name="radio"><i></i>Female</label> </div>         
                <!--<div class="radio"> <label><input type="radio" name="radio" checked=""><i></i>All</label> </div>-->
                <br><br><br><br><input type="button" value="click" id="d">
                <script>
//                    $("#d").click(function() {
//                        $("#slider_value").val($("#slider").val());
//                        $("#slider_value1").html($("#slider").val());
////                                alert($("#slider").val());
//                    });
                    $('#d').on('click',function() {
                        var x=$("#slider").val().toString();
                        var x1=x.substring(0,2);
                        var x2=x.substring(6,8);
                        $("#slider_value1").html(x1+" to "+x2);
                        
//                        alert($("#slider").val());
                    });

                </script></center>
                <!--</li>-->
            </div>
            </div>
        </div>		
        </div>
        
    </body>
</html>